<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <form>
        <input type="text" />
        <button type="button"  data-submit-disabled data-action="submit,counter">提交表单</button>
      </form>
      <script>
        class FORM {
          constructor(form) {
            this.form = form
            this.form.counter = 0
            this.form.addEventListener('click', this.handle.bind(this))
          }
          handle() {
            const actions = event.target.dataset.action
            actions.split(',').forEach((action) => {
              if (this[action]) this[action]()
            })
          }
          submit() {
            event.preventDefault()
            this.disableButton(true)
            console.log('提交中')
            setTimeout(() => {
              this.disableButton(false)
              console.log('提交结束')
            }, 1000)
          }
          disableButton(state) {
            this.form.querySelectorAll(`[data-submit-disabled]`).forEach((bt) => {
              bt.disabled = state
            })
          }
          counter() {
            this.form.counter++
            console.log(this.form.counter)
          }
        }
        document.querySelectorAll(`form`).forEach((form) => {
          new FORM(form)
        })
      </script>
</body>
</html>